<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        li{list-style: none;}
    </style>
</head>
<body>
    <div id="app">
        <!-- watch监听数组 -->
         <div>
             <button @click="addEle">新增</button>
             <button @click="delEle">删除</button>
         </div>
         <div>
            <ul>
                <li v-for="(item,index) in list" :key="index">{{item}}</li>
            </ul>
         </div>

        <!-- watch监听对象 -->
        <div>
            <span>{{zhang.name}}</span>
            <span>{{zhang.age}}</span>
            <span>{{zhang.height}}</span>
            <span>{{zhang.weight}}</span>
        </div>
        <div>
            修改名字: <input type="text" v-model.lazy="zhang.name">
        </div>
        <div>
            修改年龄: <input type="text" v-model.number="zhang.age">
        </div>

    </div>
</body>
<script>
    // watch  侦听器(数据监听)   (被监听的数据发生改变之后 对其他数据造成的影响 => 主动变化)
    // 1. 监听data中数据的变化,并执行对应的回调函数(对应属性的属性值发生改变)  => 更注重自身数据的变化对其他数组造成的影响
    // 2. 支持异步
    // 3. watch在初始化阶段并不执行, 而是在数据改变之后才执行



    // 注意:

    // Vue的响应式
    // Vue的响应式对data中的所有数据配置了拦截器 Object.defineProperty()  => 只要data中的任意属性发生改变 => 都会触发视图更新  (Vue自己内部知道数据变化了 => 咱们只能看见 不知道) 

    // watch监听数组
    // watch => 可以监听数组的变化 =>  Vue 将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新/也可以被watch中的侦听器监听到

    // watch监听对象
    // watch在监听data中的属性时,默认是浅层的 => 只监听该属性的值的变化,但是如果属性值是一个对象, 该对象的子属性发生变化时 => 默认无法监听



    var vm= new Vue({
        // el:"#app",
        data:{ // data中的数据拦截
            list:[1,4,7,2,5,8,3,6,9],
            zhang:{name:"张三",age:18,height:177,weiht:70},
        },
        methods: {
            addEle(){
                console.log("新增元素");
                var num = Math.round(Math.random()*10);
                // this.list.push(num);   // 影响原数组
                this.list = this.list.concat(num);  // 返回新数组
            },
            delEle(){
                // this.list.length--;
                // this.$forceUpdate();

                // this.list.pop();

                var arr = this.list.slice();
                arr.pop();
                this.list = arr;
            } 
        },
        watch:{
            list:function(newVal,oldVal){
                console.log("数组发生了改变", newVal,oldVal);
            },

            // 虽然我们改变了zhang.name和zhang.age => 但是对于zhang对象而言, 它的值还是引用同一片内存空间(没有变) => 不会触发watch
            zhang:function(newVal,oldVal){
                console.log("zhang发生了改变", newVal,oldVal);
            },
        }
       
    })

    vm.$mount("#app");

</script>
</html>